<template>
  <div class="container">
    <!-- top -->
    <div class="top">
      <div class="top-title">
        请问需要什么<strong style="color: blue">帮助?</strong>
      </div>
      <div class="top-input">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="topText"
        >
        </el-input>
      </div>
    </div>
    <!-- box1 -->
    <div class="box1">
      <div class="box1-card" v-for="(item, index) in box1List" :key="index">
        <el-image class="card-image" :src="item.imageUrl"></el-image>
        <p class="card-text">{{ item.text }}</p>
      </div>
    </div>
    <!-- 功能指南 -->
    <div class="box2">
      <p class="box2-title">功能指南</p>
      <div class="box2-body">
        <div class="box2-card" v-for="(item, index) in guideList" :key="index">
          <div class="card-top">
            <svg
              class="svg"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              fill="none"
              viewBox="0 0 48 48"
            >
              <path
                fill-rule="evenodd"
                fill="#4772FA"
                fill-opacity="1"
                :d="item.path"
              ></path>
            </svg>
            <div class="card-title">{{ item.title }}</div>
          </div>
          <div
            class="card-bottom"
            v-for="(ite, index) in item.noteList"
            :key="index"
          >
            <p class="crad-note">{{ ite.note }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 特色功能 -->
    <div class="box3">
      <p class="box3-title">特色功能</p>
      <div class="box3-body">
        <div
          class="box3-card"
          v-for="(item, index) in characteristicList"
          :key="index"
        >
          <el-image class="box3-image" :src="item.imageUrl"></el-image>
          <div class="box3-bottom">
            <p class="card3-title">{{ item.title }}</p>
            <p class="card3-note">{{ item.note }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 提问 -->
    <div class="box4">
      <div class="box4-body">
        <div class="box4-title">欢迎向我们提问</div>
        <div class="box4-button">
          <div class="box4-button1">联系我们</div>
          <div class="box4-button2">加入用户群</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelpCenter",
  components: {},
  data() {
    return {
      topText: "",
      box1List: [
        {
          imageUrl:
            "https://help.dida365.com/res/home/category/beginner.png?w=1920&q=75",
          text: "新手指南",
        },
        {
          imageUrl:
            "https://help.dida365.com/res/home/category/best-practice.png?w=1920&q=75",
          text: "最佳实践",
        },
        {
          imageUrl:
            "https://help.dida365.com/res/home/category/faq.png?w=1920&q=75",
          text: "常见问题",
        },
        {
          imageUrl:
            "https://help.dida365.com/res/home/category/design.png?w=1920&q=75",
          text: "设计理念",
        },
      ],
      guideList: [
        {
          path: "M40,12C40,9.79086,38.2091,8,36,8L12,8C9.79086,8,8,9.79086,8,12L8,36C8,38.2091,9.79086,40,12,40L36,40C38.2091,40,40,38.2091,40,36L40,12ZM30.5177,17.06202C30.8878,16.73037,31.4555,16.71846,31.8403,17.05292L33.3497,18.365000000000002L33.4393,18.453200000000002C33.7709,18.8233,33.7828,19.3911,33.4484,19.7758L23.6075,31.0965L23.5193,31.186C23.1493,31.5177,22.5815,31.5296,22.1967,31.1951L14.649619999999999,24.6345L14.56006,24.5463C14.22842,24.1763,14.21651,23.6085,14.55097,23.2237L15.86309,21.7143L15.951260000000001,21.6248C16.32132,21.293100000000003,16.8891,21.2812,17.27386,21.6157L22.556800000000003,26.2081L30.4295,17.15157L30.5177,17.06202Z",
          title: "任务",
          noteList: [
            { note: "添加任务" },
            { note: "超强大的提醒功能" },
            { note: "如何管理海量任务" },
            { note: "看板视图：分类管理任务" },
            { note: "时间线视图：项目管理的必备神器" },
          ],
        },
        {
          path: "M17.983890000000002,8.820249C17.89922,8.35375,17.49092,8,17,8L15,8L14.82025,8.0161113C14.35375,8.100783,14,8.50908,14,9L14,12L11.5016,12.003440000000001C10.42035,12.02633,9.97918,12.16301,9.53473,12.4007C9.04584,12.66216,8.66216,13.04584,8.400699,13.53473C8.139238,14.023620000000001,8,14.50855,8,15.84583L8.00343941,36.498400000000004C8.0263262,37.5797,8.163008,38.0208,8.400699,38.4653C8.66216,38.9542,9.04584,39.3378,9.53473,39.5993C10.023620000000001,39.8608,10.50855,40,11.84583,40L36.1542,40C37.4915,40,37.9764,39.8608,38.4653,39.5993C38.9542,39.3378,39.3378,38.9542,39.5993,38.4653C39.8608,37.9764,40,37.4915,40,36.1542L40,15.84583C40,14.50855,39.8608,14.023620000000001,39.5993,13.53473C39.3378,13.04584,38.9542,12.66216,38.4653,12.4007C37.9764,12.139240000000001,37.4915,12,36.1542,12L34,12L34,9L33.9839,8.820249C33.8992,8.35375,33.490899999999996,8,33,8L31,8L30.8202,8.0161113C30.3538,8.100783,30,8.50908,30,9L30,12L18,12L18,9L17.983890000000002,8.820249ZM17,18L15,18C14.50908,18,14.10078,18.3538,14.016110000000001,18.8202L14,19L14,21C14,21.4909,14.35375,21.8992,14.82025,21.9839L15,22L17,22C17.49092,22,17.89922,21.6462,17.983890000000002,21.1798L18,21L18,19C18,18.447699999999998,17.55228,18,17,18ZM23,18L25,18C25.5523,18,26,18.447699999999998,26,19L26,21L25.9839,21.1798C25.8992,21.6462,25.4909,22,25,22L23,22L22.8202,21.9839C22.3538,21.8992,22,21.4909,22,21L22,19L22.0161,18.8202C22.1008,18.3538,22.5091,18,23,18ZM31,18L33,18C33.5523,18,34,18.447699999999998,34,19L34,21L33.9839,21.1798C33.8992,21.6462,33.490899999999996,22,33,22L31,22L30.8202,21.9839C30.3538,21.8992,30,21.4909,30,21L30,19L30.0161,18.8202C30.1008,18.3538,30.5091,18,31,18ZM17,26L15,26C14.50908,26,14.10078,26.3538,14.016110000000001,26.8202L14,27L14,29C14,29.4909,14.35375,29.8992,14.82025,29.9839L15,30L17,30C17.49092,30,17.89922,29.6462,17.983890000000002,29.1798L18,29L18,27C18,26.4477,17.55228,26,17,26ZM23,26L25,26C25.5523,26,26,26.4477,26,27L26,29L25.9839,29.1798C25.8992,29.6462,25.4909,30,25,30L23,30L22.8202,29.9839C22.3538,29.8992,22,29.4909,22,29L22,27L22.0161,26.8202C22.1008,26.3538,22.5091,26,23,26Z",
          title: "日历",
          noteList: [
            { note: "周视图：轻松安排周计划 " },
            { note: "月视图：每月总结复盘" },
            { note: "列表视图：按天查看任务" },
            { note: "日历订阅" },
          ],
        },
        {
          path: "M8,15.81818C8,19.5838,11.0526,22.636400000000002,14.81818,22.636400000000002L21.8961,22.636400000000002C22.2547,22.636400000000002,22.5455,22.345599999999997,22.5455,21.987000000000002L22.5455,16.27273C22.5455,12.25611,19.2893,9,15.27273,9L14.81818,9C11.0526,9,8,12.0526,8,15.81818ZM40,15.81818C40,19.5838,36.9474,22.636400000000002,33.181799999999996,22.636400000000002L26.1039,22.636400000000002C25.7453,22.636400000000002,25.4545,22.345599999999997,25.4545,21.987000000000002L25.4545,16.27273C25.4545,12.25611,28.7107,9,32.7273,9L33.181799999999996,9C36.9474,9,40,12.0526,40,15.81818ZM8,32.181799999999996C8,28.4162,11.0526,25.3636,14.81818,25.3636L21.8961,25.3636C22.2547,25.3636,22.5455,25.6544,22.5455,26.013L22.5455,31.7273C22.5455,35.7439,19.2893,39,15.27273,39L14.81818,39C11.0526,39,8,35.9474,8,32.181799999999996ZM40,32.181799999999996C40,28.4162,36.9474,25.3636,33.181799999999996,25.3636L26.1039,25.3636C25.7453,25.3636,25.4545,25.6544,25.4545,26.013L25.4545,31.7273C25.4545,35.7439,28.7107,39,32.7273,39L33.181799999999996,39C36.9474,39,40,35.9474,40,32.181799999999996Z",
          title: "四象限",
          noteList: [
            { note: "如何使用四象限" },
            { note: "如何编辑四象限规则" },
          ],
        },
        {
          path: "M24.7725,6.9389211781005855C24.7313,6.888909178100586,24.6854,6.843012178100586,24.6354,6.801875178100586C24.2089,6.451033178100586,23.578699999999998,6.512390378100586,23.227899999999998,6.9389211781005855L21.3281,9.248488178100587C21.157400000000003,9.456018178100585,20.9104,9.586108178100586,20.642699999999998,9.609448178100585L17.233629999999998,9.906668178100587C16.95037,9.931368178100586,16.69669,10.091928178100586,16.553150000000002,10.337358178100587C16.30876,10.755228178100586,16.44939,11.292088178100585,16.86725,11.536478178100586L18.5749,12.535238178100586C18.9692,12.765808178100585,19.1571,13.234168178100585,19.031599999999997,13.673288178100586L18.6334,15.066188178100585C18.5795,15.254688178100587,18.5822,15.454878178100586,18.641199999999998,15.641858178100586C18.8074,16.168558178100586,19.369,16.460848178100584,19.895699999999998,16.294708178100585L23.0977,15.284688178100586C23.6851,15.099398178100586,24.3153,15.099398178100586,24.9027,15.284688178100586L28.1046,16.294708178100585C28.2916,16.353688178100587,28.4918,16.356408178100587,28.6803,16.302518178100584C29.2113,16.150728178100586,29.5187,15.597198178100586,29.3669,15.066188178100585L28.9688,13.673288178100586C28.8433,13.234168178100585,29.0312,12.765808178100585,29.4254,12.535238178100586L31.1331,11.536478178100586C31.3785,11.392938178100586,31.5391,11.139258178100587,31.5638,10.855998178100586C31.6058,10.373748178100586,31.249,9.948718178100586,30.7667,9.906668178100587L27.3577,9.609448178100585C27.09,9.586108178100586,26.8429,9.456018178100585,26.6722,9.248488178100587L24.7725,6.9389211781005855ZM40,23.999348178100586C40,19.058248178100584,37.9942,14.640258178100586,34.5517,11.705008178100586C34.3595,12.100218178100587,34.128,12.528528178100586,33.857299999999995,12.989938178100587C33.4571,13.672258178100586,33.268100000000004,14.457938178100587,33.3144,15.247628178100586L33.324600000000004,15.664318178100586Q33.3131,16.682548178100586,32.932500000000005,17.466148178100585C31.8612,19.671848178100586,29.3204,20.871548178100586,26.9021,20.108748178100583L26.3317,19.947548178100586C25.5662,19.756448178100584,24.7831,19.660948178100586,24,19.660948178100586L23.413899999999998,19.678848178100587C22.8274,19.714648178100585,22.2434,19.804148178100586,21.6693,19.947548178100586L20.7685,20.200748178100586C18.4527,20.760448178100585,16.09111,19.571648178100588,15.0685,17.466148178100585C14.81477,16.943748178100584,14.68408,16.343148178100584,14.67644,15.664318178100586L14.69211,14.909728178100586C14.67457,14.235568178100586,14.486740000000001,13.574788178100587,14.14367,12.989938178100587C13.87392,12.530078178100586,13.64311,12.103108178100586,13.45209,11.708728178100586C10.00886,14.643708178100585,8,19.060148178100587,8,23.999348178100586C8,32.83594817810059,15.16344,39.99934817810058,24,39.99934817810058C32.836600000000004,39.99934817810058,40,32.83594817810059,40,23.999348178100586Z",
          title: "番茄专注",
          noteList: [
            { note: "如何开始专注" },
            { note: "如何保持专注状态" },
            { note: "常用专注" },
            { note: "专注数据统计" },
          ],
        },
        {
          path: "M39.5,21.5Q39.5,22.2922,39.419200000000004,23.0803Q39.338499999999996,23.8683,39.177800000000005,24.644Q39.0171,25.4198,38.7782,26.1751Q38.5392,26.9304,38.2245,27.6574Q37.909800000000004,28.3844,37.5226,29.0755Q37.1355,29.7666,36.6799,30.4147Q36.224199999999996,31.0627,35.704899999999995,31.661Q35.1856,32.2592,34.608000000000004,32.8014L34.6134,32.806799999999996L25.0675,42.3527C24.4817,42.9385,23.532,42.9385,22.946199999999997,42.3527L13.434840000000001,32.8414Q12.852509999999999,32.2989,12.32879,31.6997Q11.80508,31.1004,11.3455,30.4506Q10.88592,29.8009,10.49531,29.1074Q10.10469,28.414,9.78716,27.6843Q9.469617,26.9545,9.228494,26.196Q8.987372,25.4376,8.8252,24.6584Q8.663029,23.8792,8.5815144,23.0875Q8.5,22.2959,8.5,21.5Q8.5,21.119500000000002,8.5186704,20.7395Q8.5373409,20.3594,8.5746367,19.9807Q8.611933,19.6021,8.667764,19.2257Q8.723596,18.8493,8.797827999999999,18.476100000000002Q8.872061,18.102899999999998,8.964516,17.733800000000002Q9.05697,17.3647,9.167425,17.0006Q9.277879,16.636499999999998,9.406067,16.2782Q9.53425,15.91994,9.67987,15.56841Q9.82548,15.21687,9.98817,14.8729Q10.15085,14.52892,10.33022,14.19335Q10.50959,13.85778,10.705210000000001,13.531410000000001Q10.90082,13.20504,11.11222,12.88866Q11.32362,12.57228,11.55028,12.26666Q11.77695,11.96104,12.01834,11.6669Q12.25973,11.37277,12.51526,11.09084Q12.77079,10.808900000000001,13.03984,10.53984Q13.308900000000001,10.27079,13.59084,10.01526Q13.87277,9.75973,14.1669,9.51834Q14.46104,9.27695,14.76666,9.05028Q15.07228,8.82362,15.38866,8.61222Q15.70504,8.40082,16.03141,8.205210000000001Q16.357779999999998,8.00959,16.693350000000002,7.83022Q17.02892,7.65085,17.3729,7.48817Q17.71687,7.32548,18.06841,7.17987Q18.41994,7.03425,18.7782,6.906067Q19.136499999999998,6.777879,19.5006,6.667425Q19.8647,6.55697,20.233800000000002,6.464516Q20.602899999999998,6.372061,20.976100000000002,6.297828Q21.3493,6.223596,21.7257,6.167764Q22.1021,6.111933,22.4807,6.0746367Q22.8594,6.0373409,23.2395,6.0186704Q23.619500000000002,6,24,6Q24.380499999999998,6,24.7605,6.0186704Q25.1406,6.0373409,25.5193,6.0746367Q25.8979,6.111933,26.2743,6.167764Q26.6507,6.223596,27.0239,6.297828Q27.3971,6.372061,27.7662,6.464516Q28.1353,6.55697,28.4994,6.667425Q28.8635,6.777879,29.2218,6.906067Q29.5801,7.03425,29.9316,7.17987Q30.2831,7.32548,30.6271,7.48817Q30.9711,7.65085,31.3066,7.83022Q31.6422,8.00959,31.9686,8.205210000000001Q32.295,8.40082,32.6113,8.61222Q32.9277,8.82362,33.2333,9.05028Q33.539,9.27695,33.8331,9.51834Q34.1272,9.75973,34.4092,10.01526Q34.6911,10.27079,34.9602,10.53984Q35.2292,10.808900000000001,35.484700000000004,11.09084Q35.740300000000005,11.37277,35.981700000000004,11.6669Q36.223,11.96104,36.4497,12.26666Q36.6764,12.57228,36.8878,12.88866Q37.099199999999996,13.20504,37.294799999999995,13.531410000000001Q37.4904,13.85778,37.669799999999995,14.19335Q37.8491,14.52892,38.0118,14.8729Q38.174499999999995,15.21687,38.3201,15.56841Q38.4657,15.91994,38.593900000000005,16.2782Q38.7221,16.636499999999998,38.8326,17.0006Q38.943,17.3647,39.0355,17.733800000000002Q39.1279,18.102899999999998,39.202200000000005,18.476100000000002Q39.276399999999995,18.8493,39.3322,19.2257Q39.3881,19.6021,39.425399999999996,19.9807Q39.4627,20.3594,39.481300000000005,20.7395Q39.5,21.119500000000002,39.5,21.5ZM25.25,12.5C25.6642,12.5,26,12.83579,26,13.25L26,20.5L30.25,20.5C30.6642,20.5,31,20.8358,31,21.25L31,23.75C31,24.1642,30.6642,24.5,30.25,24.5L22.75,24.5C22.3358,24.5,22,24.1642,22,23.75L22,13.25C22,12.83579,22.3358,12.5,22.75,12.5L25.25,12.5Z",
          title: "习惯打卡",
          noteList: [{ note: "开始坚持一个习惯" }, { note: "更好地完成习惯" }],
        },
      ],
      characteristicList: [
        {
          imageUrl:
            "https://help.dida365.com/res/home/special/wechat.jpg?w=1920&q=75",
          title: "玩转微信",
          note: "轻松创建任务，即时任务提醒。",
        },
        {
          imageUrl:
            "https://help.dida365.com/res/home/special/multiple-platform.jpg?w=1920&q=75",
          title: "全平台支持",
          note: "支持全网全平台下载使用，轻松同步全部平台。",
        },
        {
          imageUrl:
            "https://help.dida365.com/res/home/special/widget.jpg?w=1920&q=75",
          title: "小组件",
          note: "提供丰富多样的小组件，直接从桌面上获取所需的一切信息。",
        },
        {
          imageUrl:
            "	https://help.dida365.com/res/home/special/sticker.jpg?w=1920&q=75",
          title: "桌面便签",
          note: "将待办放入便签，直接在桌面上显示。",
        },
        {
          imageUrl:
            "https://help.dida365.com/res/home/special/timetable.jpg?w=1920&q=75",
          title: "课表导入",
          note: "开启课表视图，轻松创建课程，直观查看每日课程安排。",
        },
        {
          imageUrl:
            "https://help.dida365.com/res/home/special/hotkeys.jpg?w=1920&q=75",
          title: "桌面快捷键",
          note: "使用快捷键和指令菜单来完成应用内操作，无需鼠标，效率更高。",
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  padding-top: 72px;
  background-color: #f9f9f9;
  .top {
    width: 80%;
    height: 387px;
    margin: 0 auto;
    text-align: center;
    .top-title {
      padding-top: 120px;
      height: 64px;
      line-height: 64px;
      font-size: 50px;
      font-weight: 600;
    }
    .top-input {
      width: 530px;
      margin: 95px auto 0;
      border-radius: 10px;
    }
  }
  .box1 {
    width: 80%;
    height: 320px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    .box1-card {
      width: 21%;
      height: 234px;
      background-color: #ffffff;
      padding-top: 30px;
      margin-right: 50px;
      .card-image {
        width: 120px;
        height: 120px;
      }
      .card-text {
        padding-top: 24px;
        text-align: center;
        line-height: 28px;
        font-size: 20px;
        font-weight: 400;
        color: #191919;
      }
    }
  }
  .box2 {
    width: 80%;
    height: 820px;
    margin: 0 auto;
    .box2-title {
      font-size: 34px;
      font-weight: 600;
      line-height: 51px;
      color: #000;
      margin-bottom: 36px;
      text-align: left;
    }
    .box2-body {
      width: 100%;
      height: 750px;
      display: flex;
      flex-wrap: wrap;
      .box2-card {
        width: 30%;
        height: 328px;
        background-color: #ffffff;
        padding-top: 30px;
        padding-left: 30px;
        margin-right: 40px;
        margin-bottom: 20px;
        .card-top {
          width: 100%;
          height: 48px;
          display: flex;
          flex-wrap: nowrap;
          .svg {
            width: 48px;
            height: 48px;
          }
          .card-title {
            height: 48px;
            line-height: 48px;
            font-size: 24px;
            font-weight: 500;
            color: #191919;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 10px;
          }
        }
        .card-bottom {
          width: 100%;
          // height: 232px;
          margin-top: 10px;
          padding-left: 5px;
          text-align: left;
          .crad-note {
            height: 22px;
            line-height: 22px;
            font-size: 16px;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            margin-bottom: 10px;
          }
          .card-note:hover {
            color: #4772fa;
          }
        }
      }
    }
  }
  .box3 {
    width: 80%;
    height: 940px;
    margin: 0 auto;
    .box3-title {
      font-size: 34px;
      font-weight: 600;
      line-height: 51px;
      color: #000;
      margin-bottom: 36px;
      text-align: left;
    }
    .box3-body {
      width: 100%;
      height: 753px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      .box3-card {
        width: 30%;
        height: 358px;
        background-color: #ffffff;
        margin-right: 40px;
        margin-bottom: 40px;
        .box3-image {
          width: 100%;
          height: 226px;
        }
        .box3-bottom {
          width: 100%;
          height: 132px;
          padding: 20px 0 0 20px;
          .card3-title {
            line-height: 28px;
            font-size: 20px;
            font-weight: 500;
            color: #191919;
            margin-bottom: 8px;
          }
          .card3-note {
            line-height: 24px;
            font-size: 16px;
            font-weight: 400;
            color: #191919;
            opacity: 0.6;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }
      }
    }
  }
  .box4 {
    width: 80%;
    height: 452px;
    margin: 0 auto;
    .box4-body {
      width: 100%;
      height: 332px;
      background-image: url(https://help.dida365.com/res/home/feedback.png?w=1920&q=75);
      background-size: 80% 100%;
      .box4-title {
        line-height: 60px;
        font-size: 40px;
        font-weight: 600;
        color: #000;
        padding: 100px 0 0 50px;
        margin-bottom: 24px;
      }
      .box4-button {
        width: 100%;
        height: 48px;
        display: flex;
        justify-content: start;
        .box4-button1 {
          width: 160px;
          height: 48px;
          line-height: 48px;
          text-align: center;
          font-size: 18px;
          color: #fff;
          background-color: #4772fa;
          border-radius: 10px;
          margin-left: 50px;
          margin-right: 24px;
          cursor: pointer;
        }
        .box4-button2 {
          width: 160px;
          height: 48px;
          line-height: 48px;
          text-align: center;
          font-size: 18px;
          color: #fff;
          background-color: #05c060;
          border-radius: 10px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
